<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'addPerson.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
  </head>
  
  <body>
    <table>
    <tr><td>电话号码</td><td><input type="text" id="number"> </td> </tr>
    <tr><td>姓名</td><td><input type="text" id="name"></td> </tr>
    <tr><td>性别</td><td><input type="text" id="sex"></td> </tr>
    <tr><td>住址</td><td><input type="text" id="address"></td> </tr>
    <tr><td>e-mail</td><td><input type="text" id="email"></td> </tr>
    <tr><td colspan="2" align="right"><button id="addPerson">添加该条记录</button> </td> </tr>
    </table>
  </body>
</html>
<script>
$(document).ready(
$("#addPerson").click(function(){
var number = $("#number").val();
if(number==""||number==null){
alert("请输入电话号码");
return;
}
var name = $("#name").val();
var sex = $("#sex").val();
var address = $("#address").val();
var email = $("#email").val();
var person = {};
person["number"] = number;
person["name"] = name;
person["sex"] = sex;
person["address"] = address;
person["email"] = email;
alert(JSON.stringify(person));
$.ajax({
type:"POST",
url:"addPerson",
data:JSON.stringify(person),
contentType:"application/json",
dataType:"Json",
success:function(data){if(data.code==200) alert("添加成功");
if(data.code==500)alert("该电话号码已存在,添加失败");},
error:function(){alert("服务器出错");}
});
})



);


</script>